<template>
    <div style="display: flex;height: 100%;justify-content: space-between;">
        <div style="padding: 30px;flex: 1;overflow-y: auto">
            <div style="display: flex;align-items: center;justify-content: space-between;height: auto;margin-bottom: 30px">
                <div style="width: 62px;height: 62px;background: #1F6FE5;border-radius: 50%;margin-right: 24px;text-align: center">
                    <span style="font-size: 24px;color: white;line-height: 62px;">{{eventId.substring(0,1)}}</span>
                </div>
                <div style="display: flex;align-items:flex-start;flex-direction: column;justify-content: center;flex: 1">
                    <div style="font-size: 22px;line-height: 29px;display: flex;align-items: center">
                        {{eventData.eventTitle}}：#{{eventId}}
                        <div style="font-size: 14px;margin-left: 10px">
                            <a-tag color="green">发布中</a-tag>
                        </div>
                    </div>
                    <div style="font-size: 12px;line-height: 19px;margin-top: 6px">最后一次更新于 2 天前 by Eugene Jenkins</div>
                </div>
            </div>
            <a-tabs defaultActiveKey="2">
                <a-tab-pane tab="内容编辑" key="1">
                    <my-card-title title="事件内容" style="position: relative">
                        <div slot="actions">
                            <my-button @click="unlockEditor" v-if="editorLock">
                                <a-icon type="unlock" slot="icon" style="margin-right: 8px"/>
                                点击修改
                            </my-button>
                            <my-button v-else color="green" @click="saveEditor">
                                <a-icon type="lock" slot="icon" style="margin-right: 8px"/>
                                锁定修改
                            </my-button>
                        </div>
                        <div class="document-editor__toolbar"></div>
                        <editor :editor="editor" style="padding: 30px"
                                :config="editorConfig"
                                :disabled="editorLock"
                                @ready="onReady"
                                v-model="editorData"/>
                    </my-card-title>
                </a-tab-pane>
                <a-tab-pane tab="表单审核" key="2">
                    <my-card-title title="报名表单">
                        <a-tabs defaultActiveKey="1" id="my-tabs">
                            <a-tab-pane tab="待审核表单" key="1">
                                <a-table :columns="columns" :dataSource="auditList"
                                         :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
                                    <span slot="formId" slot-scope="formId">
                                        <a :href="'http://localhost:9099/#/eventForm/'+formId"
                                           target="_blank">{{formId}}</a>
                                    </span>
                                    <span slot="customTitle">表单ID</span>
                                    <span slot="action" slot-scope="data">
                                        <a-popconfirm placement="topLeft"
                                                      okText="Yes"
                                                      cancelText="No"
                                                      @confirm="access(data.formId)">
                                            <div slot="title">
                                                确认通过这个表单吗？
                                            </div>
                                            <a>通过</a>
                                        </a-popconfirm>
                                        <a-divider type="vertical"/>
                                        <a href="javascript:">拒绝</a>
                                        <a-divider type="vertical"/>
                                        <a href="javascript:">删除</a>
                                    </span>
                                </a-table>
                            </a-tab-pane>
                            <a-tab-pane tab="已审核表单" key="2" forceRender>
                                <a-table :columns="columns" :dataSource="accessList">
                                <span slot="formId" slot-scope="formId">
                                    <a :href="'http://localhost:9099/#/eventForm/'+formId"
                                       target="_blank">{{formId}}</a>
                                </span>
                                    <span slot="customTitle">表单ID</span>
                                    <span slot="action">
                                    <a href="javascript:">确认到场</a>
                                </span>
                                </a-table>
                            </a-tab-pane>
                        </a-tabs>
                    </my-card-title>
                </a-tab-pane>
            </a-tabs>
        </div>
        <event-setting-bar :v-if="eventData" ref="settings"/>
    </div>
</template>

<script>
    import CKEditor from '@ckeditor/ckeditor5-vue';
    import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn';
    import decoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
    import EventSettingBar from '@/components/bar/EventSettingBar';

    const columns = [
        {
            dataIndex: 'formId',
            key: 'formId',
            slots: {title: 'customTitle'},
            scopedSlots: {customRender: 'formId'},
        },
        {
            title: '报名用户',
            dataIndex: 'creator.userName',
            key: 'creator.userId',
        },
        {
            title: '报名用户邮箱',
            dataIndex: 'creator.userEmail',
            key: 'creator.userEmail',
        },
        {
            title: '报名提交时间',
            dataIndex: 'formCreateTime',
            key: 'formCreateTime',
        },
        {
            title: '操作',
            key: 'action',
            scopedSlots: {customRender: 'action'},
        },
    ];

    export default {
        name: 'EventAdmin',
        props: {
            eventId: {
                required: true,
            },
        },
        components: {
            EventSettingBar,
            'editor': CKEditor.component,
        },
        data () {
            return {
                editorLock: true,
                auditList: null,
                accessList: null,
                editorConfig: {
                    language: 'zh-cn',
                    placeholder: 'Type some text...',
                    ckfinder: {
                        uploadUrl: 'http://192.168.50.56:9090/uploadImage',
                    },
                },
                editor: decoupledEditor,
                columns,
                eventData: {},
                selectedRowKeys: [],
                editorData: '',
            };
        },
        created () {
            this.$apis.getEventById(this.eventId).then((data) => {
                if (data.eventContent && data) {
                    this.eventData = data;
                    this.editorData = data.eventContent;
                }
                this.$refs.settings.copyData(data);
            });
            this.$apis.getEventForm(this.eventId, 'audit').then((data) => {
                this.auditList = data;
            });
            this.$apis.getEventForm(this.eventId, 'access').then((data) => {
                this.accessList = data;
            });
        },
        methods: {
            async access (formId) {
                await this.$apis.accessForm(formId);
                this.$apis.getEventForm(this.eventId, 'audit').then((data) => {
                    this.auditList = data;
                });
                this.$apis.getEventForm(this.eventId, 'access').then((data) => {
                    this.accessList = data;
                });
            },
            saveEditor () {
                this.editorLock = true;
            },
            unlockEditor () {
                this.editorLock = false;
            },
            onReady (editor) {
                const toolbarContainer =
                    document.querySelector('.document-editor__toolbar');
                toolbarContainer.appendChild(editor.ui.view.toolbar.element);
            },
            onSelectChange (selectedRowKeys) {
                console.log('selectedRowKeys changed: ', selectedRowKeys);
                this.selectedRowKeys = selectedRowKeys;
            },
        },

    };
</script>

<style scoped lang="scss">
    #my-tabs /deep/ .ant-tabs-top-bar {
        margin-bottom: 0;
    }

    .fadeRight-enter-active, .fadeRight-leave-active {
        transition: all 0.3s 0.3s;
    }

    .fadeRight-enter, .fadeRight-leave-to {
        transform: translate3d(400px, 0, 0);
    }
</style>
